{{define "admin/seeclass.html"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
{{template "admin/commonlib.html"}}
    <title>TM - Class</title>

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/libs/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/libs/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/libs/Ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="/static/libs/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/bootstrap-notify.css">
    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/styles/alert-blackgloss.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
    <link rel="stylesheet" href="/static/libs/sweetalert/sweetalert.css" type="text/css"/>
    <!-- Google Font -->
    <link rel="stylesheet" href="/static/font/Souce+Sans.css" type="text/css"/>

    <style type="text/css">
        .addbtn {
            margin-left: 15px;
        }

        .btn-box-tool i.fa-times {
            font-size: 21px;
        }

    </style>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div class='notifications top-right'></div>
{{template "admin/navbar.html" .}}


    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                {{if gt (len .user.AvatarUrl) 0}}
                    <img src="{{.user.AvatarUrl}}" class="img-circle" alt="User Image">
                {{else}}
                    <img src="/static/libs/AdminLTE/img/avastar.jpg" class="img-circle" alt="User Image">
                {{end}}
                </div>
                <div class="pull-left info">
                    <p>{{.user.Email}}</p>
                    <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
                </div>
            </div>
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">MAIN NAVIGATION</li>
                <li class="treeview">
                    <a href="/admin/index">
                        <i class="fa fa-dashboard"></i> <span>总览</span>
                    </a>
                </li>


                <li class="treeview active">
                    <a href="#">
                        <i class="fa fa-th"></i>
                        <span>班级</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li class="active"><a href="/admin/seeclass"><i class="fa fa-circle-o"></i> 查看班级</a></li>
                        <li><a href="/admin/managerclass"><i class="fa fa-circle-o"></i> 管理班级</a></li>
                    </ul>
                </li>


                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-laptop"></i>
                        <span>测试</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/getexams"><i class="fa fa-circle-o"></i> 查看小测</a></li>
                        <li><a href="/admin/managerexam"><i class="fa fa-circle-o"></i> 管理小测</a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-folder"></i>
                        <span>公告</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/seenotice"><i class="fa fa-circle-o"></i> 查看公告</a></li>
                        <li><a href="/admin/managernotice"><i class="fa fa-circle-o"></i> 管理公告</a></li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <a class="btn btn-primary" href="" data-href="/admin/createclass"
                   data-toggle="modal" data-target="#confirm-delete">
                    <span class="glyphicon glyphicon-plus"></span>新增班级</a>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/admin/seeclass"><i class="fa fa-dashboard"></i> 班级</a></li>
                <li class="active"><a href="#">查看班级</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
        {{/*<div class="row">*/}}
        {{/*<div class="col-xs-12">*/}}
        {{/*<div class="box">*/}}
        {{/*<!--<div class="box-header">*/}}
        {{/*<h3 class="box-title">Hover Data Table</h3>*/}}
        {{/*</div>*/}}
        {{/*<!-- /.box-header -->*/}}
        {{/*<div class="box-body">*/}}
        {{/*<table id="example2" class="table table-bordered table-hover">*/}}
        {{/*<thead>*/}}
        {{/*<tr>*/}}
        {{/*<th>ID</th>*/}}
        {{/*<th>标题</th>*/}}
        {{/*<th>公开</th>*/}}
        {{/*<th>创建时间</th>*/}}
        {{/*<th>更新时间</th>*/}}
        {{/*<th>操作</th>*/}}
        {{/*</tr>*/}}
        {{/*</thead>*/}}
        {{/*<tbody>*/}}
        {{/*{{range .posts}}*/}}
        {{/*<tr>*/}}
        {{/*<td>{{.ID}}</td>*/}}
        {{/*<td><a href="/post/{{.ID}}" target="_blank">{{.Title}}</a></td>*/}}
        {{/*<td>*/}}
        {{/*<a href="javascript:void(0);" onclick="pushlish('{{.ID}}')"> {{if .IsPublished}}√{{else}}×{{end}}</a>*/}}
        {{/*</td>*/}}
        {{/*<td>{{dateFormat .CreatedAt "06-01-02 15:04"}}</td>*/}}
        {{/*<td>{{dateFormat .UpdatedAt "06-01-02 15:04"}}</td>*/}}
        {{/*<td><a href="/admin/post/{{.ID}}/edit" target="_blank" class="btn btn-primary">编辑</a>*/}}
        {{/*<a href="#" class="btn btn-danger" data-href="/admin/post/{{.ID}}/delete" data-toggle="modal" data-target="#confirm-delete">删除</a>*/}}
        {{/*</td>*/}}
        {{/*</tr>*/}}
        {{/*{{end}}*/}}
        {{/*</tfoot>*/}}
        {{/*</table>*/}}
        {{/*</div>*/}}
        {{/*<!-- /.box-body -->*/}}
        {{/*</div>*/}}
        {{/*<!-- /.box -->*/}}
        {{/*</div>*/}}
        {{/*<!-- /.col -->*/}}
        {{/*</div>*/}}
            <!-- /.row -->
            <div class="classeslist row">
            {{range .classes}}
                <div class="col-md-4">
                    <!-- Widget: user widget style 1 -->
                    <div class="box box-widget widget-user-2">
                        <input name="classid" type="hidden" value="{{.ClassID}}"/>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i></button>
                        </div>
                        <!-- Add the bg color to the header using any of the bg-* classes -->
                        <div class="widget-user-header {{.ClassColor}}">
                            <div class="widget-user-image">
                                <img class="img-circle" src="/static/images/{{.ClassLogo}}" alt=" Class Avatar">
                            </div>
                            <!-- /.widget-user-image -->
                            <h3 class="widget-user-username">{{.ClassName}}</h3>
                            <h5 class="widget-user-desc">班主任:  {{$.user.NickName}}, 班级邀请码: {{.InviteCode}}</h5>
                            <h6 class="widget-user-desc">班级描述:   {{.ClassDescri}}</h6>
                        </div>
                        <div class="box-footer no-padding">
                            <ul class="nav nav-stacked">
                                <li><a href="#">学生数 <span class="pull-right badge bg-blue">{{.StudentNums}}</span></a>
                                </li>
                                <li><a href="#">测试数 <span class="pull-right badge bg-aqua">{{.ExamNums}}</span></a></li>
                                <li><a href="#">公告数 <span class="pull-right badge bg-green">{{.NoticeNum}}</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- /.widget-user -->
                </div>
            {{end}}
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                建立班级
            </div>
            <div class="modal-body">
                <form id="form_data" role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级名称</label>
                        <div class="col-sm-10">
                            <input name="classname" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级描述</label>
                        <div class="col-sm-10">
                            <textarea name="classdescri" class="form-control" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级邀请码</label>
                        <div class="col-sm-4">
                            <input name="invitecode" readonly value="111111" class="form-control">
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="change btn btn-block btn-info btn-sm">换一个</button>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn cancelok btn-default" data-dismiss="modal">取消</button>
                <a class="btn btn-primary btn-ok">确定</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirm-delete2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                请确认
            </div>
            <div class="modal-body">
                <form id="form_data" role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">输入账号密码</label>
                        <div class="col-sm-6">
                            <input name="password" class="form-control">
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="checkuser btn btn-block btn-info btn-sm">验证</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class=" btn btn-default cancel" data-dismiss="modal">取消</button>
                <a class="disabled btn btn-danger btn-ok deleteclass">删除记录</a>
            </div>
        </div>
    </div>
</div>

<!-- jQuery 3 -->
<!-- Bootstrap 3.3.7 -->
{{template "admin/page_end.html"}}
{{/*<script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>*/}}
<!-- DataTables -->
{{/*<script src="/static/libs/datatables.net/js/jquery.dataTables.min.js"></script>*/}}
{{/*<script src="/static/libs/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>*/}}

<!-- AdminLTE App -->
<!-- page script -->
<script>
    // var user = ;
    var issave = false;
    var custom = [
        'bangTidy',
        'blackgloss'
    ];

    $('#confirm-delete2').on('show.bs.modal', function (e) {
        console.log("jinlaile");
        var userid = {{.user.ID}}+"";
        var classid = e.relatedTarget.classid;
        var _this = e.relatedTarget.remove;
        var mythis = e.relatedTarget.mythis;
        // alert(e.relatedTarget.classid);
        var delethis = $(this).find('.deleteclass');
        var checkthis = $(this).find('.checkuser');
        $(this).find('.checkuser').click(function () {
            var password = $('input[name="password"]').val();
            password = $.trim(password);
            console.log(password.length);
            if (password.length == 0) {
                $('.top-right').notify({
                    message: "密码不能为空",
                    type: custom[1]
                }).show();
                return
            }
            $.post("/admin/checkuser", {userid: userid, password: password}, function (result) {
                console.log(result);
                if (result.succeed) {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                    checkthis.unbind("click");
                    issave = true;
                    delethis.removeClass("disabled");
                } else {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                }
            }, 'json');

        });


        $(this).find('.deleteclass').click(function () {
            if (issave) {
                $.post("/admin/class/delete", {classid: classid}, function (result) {
                    console.log(result);
                    if (result.succeed) {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                        $('input[name="password"]').val("");
                        $("#confirm-delete2").modal("hide");
                        delethis.addClass("disabled");
                        delethis.unbind("click");
                        issave = false;
                        _this.remove(mythis);
                    } else {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                        delethis.unbind("click");
                    }
                }, 'json');
            } else {
                $('.top-right').notify({
                    message: "未验证密码",
                    type: custom[1]
                }).show();
            }
        });

        $(this).find('.cancel').click(function () {
            delethis.unbind("click");
            checkthis.unbind("click");
        });


    });


    $('#confirm-delete').on('show.bs.modal', function (e) {
        console.log($(this));
        $(this).find('.btn-ok').unbind("click");
        var invitecode = $('input[name="invitecode"]');
        var changeunbind = $(this).find('.change');
        var btnokunbind = $(this).find('.btn-ok');
        $.get("/admin/getcode", {isFirst: true}, function (result) {
            console.log(result);
            if (result.succeed) {
                // $('.top-right').notify({
                //     message: {text: result.message},
                //     type: custom[1]
                // }).show();
                invitecode.val(result.invitecode)
            } else {
                $('.top-right').notify({
                    message: {text: result.message},
                    type: custom[1]
                }).show();
            }
        });

        $(this).find('.change').click(function () {
            var invitecode = $('input[name="invitecode"]');


            $.get("/admin/getcode", {isFirst: true}, function (result) {
                console.log(result);
                if (result.succeed) {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                    invitecode.val(result.invitecode)
                } else {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                }
            });
        });


        $(this).find('.btn-ok').click(function () {
            var classname = $('input[name="classname"]').val();
            var classdescrib = $('textarea[name="classdescri"]').val();
            var invitecode = $('input[name="invitecode"]').val();


            if (!classname) {
                $('.top-right').notify({
                    message: {text: '班级名称不能为空！'},

                    type: custom[1]
                }).show();
                $('input[name="classname"]').focus();
                return;
            }
            // if (!content) {
            //     alert("请填写内容");
            //     return;
            // }
            var demo_settings = $("<div />", {"class": 'col-md-4'});

            demo_settings.append(
                    // 插入的元素
                    "<div class='box box-widget widget-user-2'>"
                    + "<input name='classid' type='hidden' value=''/>\n" +
                    "                    <div class='box-tools pull-right'>\n" +
                    "                    <button type='button' class='btn btn-box-tool' data-widget='remove'><i\n" +
                    "        class='fa fa-times'></i></button>\n" +
                    "            </div>\n" +
                    "            <!-- Add the bg color to the header using any of the bg-* classes -->\n" +
                    "            <div class='widget-user-header bg-green'>\n" +
                    "                    <div class='widget-user-image'>\n" +
                    "                    <img class='img-circle' src='/static/images/logo1.png' alt=' Class Avatar'>\n" +
                    "                    </div>\n" +
                    "                    <!-- /.widget-user-image -->\n" +
                    "                    <h3 class='widget-user-username'></h3>\n" +
                    "                    <h5 class='widget-user-desc'>班主任:  , 班级邀请码: </h5>\n" +
                    "            <h6 class='widget-user-desc'>班级描述:   </h6>\n" +
                    "            </div>\n" +
                    "            <div class='box-footer no-padding'>\n" +
                    "                    <ul class='nav nav-stacked'>\n" +
                    "                    <li><a href='#'>学生数 <span class='pull-right badge bg-blue'></span></a>\n" +
                    "            </li>\n" +
                    "            <li><a href='#'>测试数 <span class='pull-right badge bg-aqua'></span></a></li>\n" +
                    "            <li><a href='#'>公告数 <span class='pull-right badge bg-green'></span></a>\n" +
                    "            </li>\n" +
                    "            </ul>\n" +
                    "            </div>\n" +
                    "            </div>"
            );

            $.post($(e.relatedTarget).data('href'), {
                classname: classname,
                classdescri: classdescrib,
                invitecode: invitecode
            }, function (result) {
                console.log(result);
                if (result.succeed) {
                    swal({
                        title: "成功",
                        text: "跳转到班级查看页",
                        type: "success",
                        timer: 2000,
                        showConfirmButton: false
                    });

                    var demo_settings = $("<div />", {"class": 'col-md-4'});

                    demo_settings.append(
                            // 插入的元素
                            "<div class='box box-widget widget-user-2'>"
                            + "<input name='classid' type='hidden' value='"
                            + result.class.ClassID
                            + "'/>\n" +
                            "                    <div class='box-tools pull-right'>\n" +
                            "                    <button type='button' class='btn btn-box-tool' data-widget='remove'><i\n" +
                            "        class='fa fa-times'></i></button>\n" +
                            "            </div>\n" +
                            "            <!-- Add the bg color to the header using any of the bg-* classes -->\n" +
                            "            <div class='widget-user-header  "
                            + result.class.ClassColor
                            + "'>\n" +
                            "                    <div class='widget-user-image'>\n" +
                            "                    <img class='img-circle' src='/static/images/"
                            + result.class.ClassLogo
                            + "' alt=' Class Avatar'>\n" +
                            "                    </div>\n" +
                            "                    <!-- /.widget-user-image -->\n" +
                            "                    <h3 class='widget-user-username'>"
                            + result.class.ClassName
                            + "</h3>\n" +
                            "                    <h5 class='widget-user-desc'>班主任: "
                            + result.nickname
                            + "  , 班级邀请码:"
                            + result.class.InviteCode
                            + " </h5>\n" +
                            "            <h6 class='widget-user-desc'>班级描述:" +
                            result.class.ClassDescri
                            + "   </h6>\n" +
                            "            </div>\n" +
                            "            <div class='box-footer no-padding'>\n" +
                            "                    <ul class='nav nav-stacked'>\n" +
                            "                    <li><a href='#'>学生数 <span class='pull-right badge bg-blue'>" +
                            result.class.StudentNums
                            + "</span></a>\n" +
                            "            </li>\n" +
                            "            <li><a href='#'>测试数 <span class='pull-right badge bg-aqua'>" +
                            result.class.ExamNums
                            + "</span></a></li>\n" +
                            "            <li><a href='#'>公告数 <span class='pull-right badge bg-green'>" +
                            result.class.NoticeNum
                            + "</span></a>\n" +
                            "            </li>\n" +
                            "            </ul>\n" +
                            "            </div>\n" +
                            "            </div>"
                    );

                    $('#confirm-delete').modal("hide");
                    $(".classeslist").append(demo_settings);
                    btnokunbind.unbind("click");
                    changeunbind.unbind("click");
                    // setTimeout(function () {
                    // }, 2000);
                } else {
                    $('.top-right').notify({
                        message: {text: "修改失败，原因：" + result.message},
                        type: custom[1]
                    }).show();
                }
            }, 'json');
        });

        $(this).find('.cancelok').click(function () {
            changeunbind.unbind("click");
            btnokunbind.unbind("click");
        });
    });
    // $(function () {
    //     $('#example2').DataTable({
    //         'paging': true,
    //         'lengthChange': false,
    //         'searching': false,
    //         'ordering': true,
    //         'info': true,
    //         'autoWidth': false
    //     });
    // });

    function pushlish(id) {
        $.post("/admin/post/" + id + "/publish", {}, function (result) {
            console.log(result);
            if (result.succeed) {
                window.location.href = window.location.href;
            }
        }, "json")
    }


</script>
</body>
</html>
{{end}}